<html xmlns:th="http://www.thymeleaf.org"
	  xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<div th:replace="common/commoncss :: commoncss"></div>
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/layui.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/assets/css/view.css}"/>
<script type="text/javascript" th:src="@{/js/task/taskmanage.js}"></script>

<style type="text/css">
a {
	color: black;
}

a:hover {
	text-decoration: none;
}

.label-back {
	background-color: #6C7B8B;
	color: white;
}
			
.label-back:hover {
	color: white !important;
	background-color: #5c666b !important;
}

.block {
	display: inline-block;
	width: 20px;
}

.co {
	color: blue;
}

.bl {
	color: black;
}

.commen {
	cursor: pointer;
}

</style>
<div class="row" style="padding-top: 10px;">
	<div class="col-md-2">
		<h1 style="font-size: 24px; margin: 0;" class="">角色管理</h1>
	</div>
	<div class="col-md-10 text-right">
		<a href="##">
			<span class="glyphicon glyphicon-home"></span> 首页</a>
		> <a disabled="disabled">角色管理</a>
	</div>
</div>
<div class="row" style="padding-top: 15px;">
	<div class="col-md-12 thistable">
		<div class="layui-content">
			<div class="layui-row">
				<div class="layui-card">
					<div class="layui-card-body">
						<button class="layui-btn layui-btn-blue"><span class="glyphicon glyphicon-plus"><a th:href="@{/a/role/form}">新增</a></span>
						</button>
						<table class="layui-table">
							<colgroup>
								<col width="150">
								<col width="200">
								<col>
							</colgroup>
							<thead>
							<tr>
								<th>角色名</th>
								<th>操作</th>
							</tr>
							</thead>
							<tbody>
							<tr th:each="role:${roles}">
								<td th:text="${role.roleName}">admin</td>
								<td>
									<a href="#" th:href="@{/a/role/form(roleId=${role.roleId})}" class="layui-btn layui-btn-sm">编辑</a>
									<button class="layui-btn layui-btn-sm layui-btn-danger">启用</button>
									<!--<button class="layui-btn layui-btn-sm layui-btn-danger" onclick="loadMenu()">授权</button>-->
								</td>
							</tr>
							</tbody>
						</table>
						<!--分页导航-->
						<div id="pagination"></div>
						<!--加载菜单数据-->
						<div class="show-menu-data" style="display: none;padding: 10px">
							<form class="layui-form">
								<div id="menuTree" class="xtree_contianer"></div>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script th:src="@{/assets/layui.all.js}"></script>
	<script th:inline="javascript">
		/*<![CDATA[*/
		var count = [[${count}]];//总记录数
		var curr = [[${curr}]];//当前页
		var contextPath = [[${#request.getContextPath()}]]; //获取当前应用路径
		/*]]>*/
	</script>
	<script type="text/javascript">
		layui.use('laypage', function () {
			var laypage = layui.laypage;

			//执行一个laypage实例
			laypage.render({
				elem: 'pagination' //注意，这里的 data 是 ID，不用加 # 号
				, count: count //数据总数，从服务端得到
				, curr: curr
				, limit: 5
				, jump: function (obj, first) {
					//obj包含了当前分页的所有参数，比如：
					console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
					console.log(obj.limit); //得到每页显示的条数

					//首次不执行
					if (!first) {
						window.location.href = contextPath + "/a/role/list?page=" + (obj.curr) + "&size=" + obj.limit
					}
				}
			});
		});
	</script>
	</div>
</div>
</html>


